<template>
    <div class="chart" id="myChart" >
        <div class="emcs_charts" :id="id"  ></div>
    </div>
</template>
<script>
    // 引入highCharts模块
    import HighCharts from 'highcharts'
    // 引入这个图表的外部资源数据
    // import data from '../chart-options/options.js'

    export default {
        props: {text: Number},
        data() {
            return{
                id: 'chart',
                dataObj: {
                    chart: {//图表样式
                        type:'area',//指定图表的类型,这里是面积图
                    },
                    //是否启用Labels。x，y轴默认值都是true，如果想禁用（或不显示）Labels，设置该属性为false即可
                    credits: {
                        enabled:false
                    },
                    title: {//指定图表标题
                        text:''
                    },
                    colors: ['#4287FE','#E6EEFF','rgba(255,133,133,1)'],
                    xAxis: {//图表的横坐标,一个轴为{ }
                        title:{//横坐标标题
                            text:''
                        },
                        //x坐标轴的刻度值
                        categories: ['01-04', '06-04','12-04'], //指定x轴分组
                        labels: {//坐标轴上的刻度值（显示间隔、样式、单位）
                            style: {
                                color: '#999999'
                            },
                            format:'{value}',//刻度值的单位
                            align: 'center'
                        },
                        lineColor: '#dfdfdf',//坐标轴的颜色
                        tickColor: '#dfdfdf',//坐标轴上的刻度线的颜色
                        tickLength: 1,//坐标轴上刻度线的长度
                        gridLineWidth:1,//网格线宽度。x轴默认为0，y轴默认为1px。
                        gridLineColor:'#f2f2f2',//网格线颜色。默认为：#C0C0C0。
                        // gridLineDashStyle: 'Dash',//网格线线条样式。和Css border-style类似，常用的有：Solid、Dot、Dash
                        tickInterval: 1,//刻度间隔
                        tickmarkPlacement: 'on',//刻度线对齐方式，有between和on可选，默认是between
                        style: {
                            color: '#999999',
                            fontSize:10
                        },
                        crosshair:{//鼠标放上后显示纵轴的数据
                            color:'#999',
                            width:1
                        }
                    },
                    yAxis: [{//图表的纵坐标，多个轴[{轴一},{轴二}]
                        gridLineWidth: 1,
                        gridLineColor:'#f2f2f2',
                        // tickPositions: [0, 100, 200, 300, 400,500],//y轴刻度值
                        // tickPositions:[],
                        tickLength:0,
                        title: {//纵坐标标题
                            text: ' ',
                            margin:0,
                            style: {
                                color: '#999999',
                                fontSize:10
                            }
                        },
                        labels:{//坐标轴上刻度的样式及单位
                            style: {
                                color: '#999999',
                                fontSize:10
                            },
                            format:'{value}',//坐标轴上的单位
                        },
                        offset:-30,//距离坐标轴的距离
                    },{
                        gridLineWidth: 1,
                        gridLineColor:'#f2f2f2',
                        tickColor: '#fff',
                        tickInterval:25,
                        tickLength:0,
                        title: {
                            text: '',
                            margin:0,
                            style: {
                                color: '#999999',
                                fontSize:10
                            }
                        },
                        labels:{
                            style: {
                                color: '#999999',
                                fontSize:10
                            },
                            format:'{value}'
                        },
                        opposite:true,//设置opposite: true表示该轴位置反转，即为y轴时显示在右侧
                        offset:-30
                    }],
                    tooltip: {//数据提示框
                        headerFormat: '<small>{point.key}</small><br/>',//标题格式
                        pointFormat: '<span style="color:{series.color};"></span>{point.y}<br/>',
                        shared: true,
                        followPointer:true,//跟随鼠标
                        followPointerMove:true,//是否跟随手指移动
                        // footerFormat: 'muzi',//尾部格式化字符串
                        style:{
                            fontSize:10,
                            fontFamily:'微软雅黑',
                            fontWeight:'normal',
                            color:'#666'
                        }
                    },
                    //标示线总是垂直于它属于的轴。它可单独定义在x轴或y轴，也可以同时定义在x轴和y轴
                    plotOptions: {
                        area: {
                            //pointStart: 1940,
                            marker: {
                                enabled: false,
                                symbol: 'circle',
                                radius: 2,
                                states: {
                                    hover: {
                                        enabled: true
                                    }
                                }
                            },
                            fillOpacity:0.2,
                            lineWidth:1
                        }
                    },
                    legend: {//图例居中显示在图表下方
                        align: 'center',
                        symbolRadius:5,//图标圆角
                        symbolWidth:10,//图标宽度
                        symbolHeight:10,//图标高度
                        itemStyle: {
                            color: '#999999',
                            fontWeight:'normal',
                            fontSize:12
                        },
                        itemMarginBottom: -14,//图例项底部外边距
                    },

                    series: [

                    ]
                }
            }
        },
        mounted() {//钩子函数挂载时实例化这个图表
            // alert(this.text)
            // chart(参数1,参数2);第一个参数挂载组件的容器，第二个参数为图表所需要的数据对象
            // HighCharts.chart(this.id,this.dataObj)
            // this.detail2(0)
        },
        methods:{
            detail(type,name,fid,data,nweData){
                this.$api.get('market/data/flowtrend?timerange=' + type +'&data='+data +'&fid='+fid+'&time='+nweData, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        var arr = response.data.data
                        var dateArr = []
                        var timeArr = []
                        for (var i in arr) {
                            dateArr.push(arr[i].time)
                            timeArr.push(arr[i].value)
                        }
                        var arr1 = [].slice.call(timeArr);
                        var resArr = dateArr
                            // .reverse();
                        // var yList=[10,20,30,40,50,60]
                        this.dataObj.xAxis.categories = resArr
                        // this.dataObj.yAxis.tickPositions = yList//y轴刻度值
                        this.dataObj.series= [{//数据列是一组数据集合
                            name: '趋势对比',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                            data: arr1,
                        }
                            ]
                        // this.dataObj.yAxis.tickPositions=[0, 150, 300, 450, 600,750]
                        HighCharts.chart(this.id,this.dataObj)
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            },
            detail2(type,name,fid,data,time1,time2){
                this.$api.get('market/data/daylist?type=' + type +'&start='+time1+'&end='+time2+'&fid='+fid, {}, response => {
                    if (response.status >= 200 && response.status < 300) {
                        // console.log(response.data.data);
                        var arr = response.data.data
                        var dateArr = []
                        var timeArr = []
                        for (var i in arr) {
                            dateArr.push(arr[i].time)
                            timeArr.push(arr[i].value)
                        }

                        var arr1 = [].slice.call(timeArr);
                        var resArr = dateArr;

                        // var yList=[10,20,30,40,50,60]
                        this.dataObj.xAxis.categories = resArr
                        // this.dataObj.yAxis.tickPositions = yList//y轴刻度值
                        this.dataObj.series= [{//数据列是一组数据集合
                            name: '趋势对比',//name 代表数据列的名字，并且会显示在数据提示框（Tooltip）及图例（Legend）中
                            data: arr1,
                        }
                        ]
                        // this.dataObj.yAxis.tickPositions=[0, 150, 300, 450, 600,750]
                        HighCharts.chart(this.id,this.dataObj)
                    } else {
                        console.log(response.message);
                        //请求失败，response为失败信息
                    }
                });
            }
        }
    }
</script>

<style scoped lang='stylus'>
    .chart{
        float left ;
        background-color #fff;
        padding 10px 0;
        margin-top 20px;
        border-radius 6px
        width 40%;
        .emcs_charts{
            min-width 890px;
            height 280px;
        }
    }
</style>
